<template>
    <div>
        <table class="wq text-center" border="0" cellpadding="0" cellspacing="1">
            <tr class="t_list_caption">
                <td width="8%">生肖</td>
                <td>号码</td>
                <td colspan="2">赔率</td>
                <td width="8%">生肖</td>
                <td>号码</td>
                <td colspan="2">赔率</td>
            </tr>
            <tr class="t_td_text">
               <td class="caption_1">家禽</td>
               <td>马 羊 猪 狗 牛 鸡</td>
               <td class="colorRed bolds odds">{{ratedata['特肖:家禽野兽:家禽']}}</td>
               <td><input type="text" class="moneyinp" v-model="moneydata['特肖:家禽野兽:家禽']" @focus="quickbetFuns($event,'特肖:家禽野兽:家禽')"></td>
               <td class="caption_1">野兽</td>
               <td>兔 猴 龙 鼠 虎 蛇</td>
               <td class="colorRed bolds odds">{{ratedata['特肖:家禽野兽:野兽']}}</td>
               <td><input type="text" class="moneyinp" v-model="moneydata['特肖:家禽野兽:野兽']" @focus="quickbetFuns($event,'特肖:家禽野兽:野兽')"></td>
            </tr>
            <tr class="t_td_text">
               <td class="caption_1">天肖</td>
               <td>兔 马 猴 猪 牛 龙</td>
               <td class="colorRed bolds odds">{{ratedata['特肖:天肖地肖:天肖']}}</td>
               <td><input type="text" class="moneyinp" v-model="moneydata['特肖:天肖地肖:天肖']" @focus="quickbetFuns($event,'特肖:天肖地肖:天肖')"></td>
               <td class="caption_1">地肖</td>
               <td>蛇 羊 鸡 狗 鼠 虎</td>
               <td class="colorRed bolds odds">{{ratedata['特肖:天肖地肖:地肖']}}</td>
               <td><input type="text" class="moneyinp" v-model="moneydata['特肖:天肖地肖:地肖']" @focus="quickbetFuns($event,'特肖:天肖地肖:地肖')"></td>
            </tr>
            <tr class="t_td_text">
               <td class="caption_1">前肖</td>
               <td>鼠 牛 虎 兔 龙 蛇</td>
               <td class="colorRed bolds odds">{{ratedata['特肖:前肖后肖:前肖']}}</td>
               <td><input type="text" class="moneyinp" v-model="moneydata['特肖:前肖后肖:前肖']" @focus="quickbetFuns($event,'特肖:前肖后肖:前肖')"></td>
               <td class="caption_1">后肖</td>
               <td>马 羊 猴 鸡 狗 猪</td>
               <td class="colorRed bolds odds">{{ratedata['特肖:前肖后肖:后肖']}}</td>
               <td><input type="text" class="moneyinp" v-model="moneydata['特肖:前肖后肖:后肖']" @focus="quickbetFuns($event,'特肖:前肖后肖:后肖')"></td>
            </tr>
            <tr class="t_td_text">
               <td class="caption_1">男肖</td>
               <td>鼠 牛 虎 龙 马 猴 狗</td>
               <td class="colorRed bolds odds">{{ratedata['特肖:男肖女肖:男肖']}}</td>
               <td><input type="text" class="moneyinp" v-model="moneydata['特肖:男肖女肖:男肖']" @focus="quickbetFuns($event,'特肖:男肖女肖:男肖')"></td>
               <td class="caption_1">女肖</td>
               <td>兔 蛇 羊 鸡 猪</td>
               <td class="colorRed bolds odds">{{ratedata['特肖:男肖女肖:女肖']}}</td>
               <td><input type="text" class="moneyinp" v-model="moneydata['特肖:男肖女肖:女肖']" @focus="quickbetFuns($event,'特肖:男肖女肖:女肖')"></td>
            </tr>
            <tr class="t_td_text">
               <td class="caption_1">春肖</td>
               <td>兔 虎 龙</td>
               <td class="colorRed bolds odds">{{ratedata['特肖:春夏秋冬肖:春肖']}}</td>
               <td><input type="text" class="moneyinp" v-model="moneydata['特肖:春夏秋冬肖:春肖']" @focus="quickbetFuns($event,'特肖:春夏秋冬肖:春肖')"></td>
               <td class="caption_1">夏肖</td>
               <td>马 蛇 羊</td>
               <td class="colorRed bolds odds">{{ratedata['特肖:春夏秋冬肖:夏肖']}}</td>
               <td><input type="text" class="moneyinp" v-model="moneydata['特肖:春夏秋冬肖:夏肖']" @focus="quickbetFuns($event,'特肖:春夏秋冬肖:夏肖')"></td>
            </tr>
            <tr class="t_td_text">
               <td class="caption_1">秋肖</td>
               <td>鸡 猴 狗</td>
               <td class="colorRed bolds odds">{{ratedata['特肖:春夏秋冬肖:秋肖']}}</td>
               <td><input type="text" class="moneyinp" v-model="moneydata['特肖:春夏秋冬肖:秋肖']" @focus="quickbetFuns($event,'特肖:春夏秋冬肖:秋肖')"></td>
               <td class="caption_1">冬肖</td>
               <td>鼠 猪 牛</td>
               <td class="colorRed bolds odds">{{ratedata['特肖:春夏秋冬肖:冬肖']}}</td>
               <td><input type="text" class="moneyinp" v-model="moneydata['特肖:春夏秋冬肖:冬肖']" @focus="quickbetFuns($event,'特肖:春夏秋冬肖:冬肖')"></td>
            </tr>
            <tr class="t_td_text">
               <td class="caption_1">东肖</td>
               <td>鼠 龙 猴</td>
               <td class="colorRed bolds odds">{{ratedata['特肖:东南西北肖:东肖']}}</td>
               <td><input type="text" class="moneyinp" v-model="moneydata['特肖:东南西北肖:东肖']" @focus="quickbetFuns($event,'特肖:东南西北肖:东肖')"></td>
               <td class="caption_1">南肖</td>
               <td>牛 蛇 鸡</td>
               <td class="colorRed bolds odds">{{ratedata['特肖:东南西北肖:南肖']}}</td>
               <td><input type="text" class="moneyinp" v-model="moneydata['特肖:东南西北肖:南肖']" @focus="quickbetFuns($event,'特肖:东南西北肖:南肖')"></td>
            </tr>
            <tr class="t_td_text">
               <td class="caption_1">西肖</td>
               <td>虎 马 狗</td>
               <td class="colorRed bolds odds">{{ratedata['特肖:东南西北肖:西肖']}}</td>
               <td><input type="text" class="moneyinp" v-model="moneydata['特肖:东南西北肖:西肖']" @focus="quickbetFuns($event,'特肖:东南西北肖:西肖')"></td>
               <td class="caption_1">北肖</td>
               <td>兔 羊 猪</td>
               <td class="colorRed bolds odds">{{ratedata['特肖:东南西北肖:北肖']}}</td>
               <td><input type="text" class="moneyinp" v-model="moneydata['特肖:东南西北肖:北肖']" @focus="quickbetFuns($event,'特肖:东南西北肖:北肖')"></td>
            </tr>
            <tr class="t_td_text">
               <td class="caption_1">红肖</td>
               <td>马 兔 鼠 鸡</td>
               <td class="colorRed bolds odds">{{ratedata['特肖:红蓝绿肖:红肖']}}</td>
               <td><input type="text" class="moneyinp" v-model="moneydata['特肖:红蓝绿肖:红肖']" @focus="quickbetFuns($event,'特肖:红蓝绿肖:红肖')"></td>
               <td class="caption_1">蓝肖</td>
               <td>蛇 虎 猪 猴</td>
               <td class="colorRed bolds odds">{{ratedata['特肖:红蓝绿肖:蓝肖']}}</td>
               <td><input type="text" class="moneyinp" v-model="moneydata['特肖:红蓝绿肖:蓝肖']" @focus="quickbetFuns($event,'特肖:红蓝绿肖:蓝肖')"></td>
            </tr>
            <tr class="t_td_text">
               <td class="caption_1">绿肖</td>
               <td>羊 龙 牛 狗</td>
               <td class="colorRed bolds odds">{{ratedata['特肖:红蓝绿肖:绿肖']}}</td>
               <td><input type="text" class="moneyinp" v-model="moneydata['特肖:红蓝绿肖:绿肖']" @focus="quickbetFuns($event,'特肖:红蓝绿肖:绿肖')"></td>
               <td colspan="9"></td>
            </tr>
        </table>
        <table class="wq text-center" border="0" cellpadding="0" cellspacing="1">
                    <tr class="t_list_caption">
                        <td width="8%">生肖</td>
                        <td>号码</td>
                        <td colspan="2">赔率</td>
                    </tr>
                    <tr class="t_td_text">
                        <td class="caption_1">天玄</td>
                        <td>
                            <span class="redBalls">01</span><span class="blueBalls">04</span><span class="redBalls">07</span>
                            <span class="blueBalls">09</span><span class="blueBalls">10</span><span class="greenBalls">11</span>
                            <span class="blueBalls">14</span><span class="greenBalls">17</span><span class="redBalls">19</span>
                            <span class="blueBalls">20</span><span class="greenBalls">21</span><span class="redBalls">24</span>
                            <span class="greenBalls">27</span><span class="redBalls">29</span><span class="redBalls">30</span>
                            <span class="blueBalls">31</span><span class="redBalls">34</span><span class="blueBalls">37</span>
                            <span class="greenBalls">39</span><span class="redBalls">40</span><span class="blueBalls">41</span>
                            <span class="greenBalls">44</span><span class="blueBalls">47</span><span class="greenBalls">49</span>
                        </td>
                        <td class="colorRed bolds odds">{{ratedata['特码:天玄地机:天玄']}}</td>
                        <td><input type="text" class="moneyinp" v-model="moneydata['特码:天玄地机:天玄']" @focus="quickbetFuns($event,'特码:天玄地机:天玄')"></td>
                    </tr>
                    <tr class="t_td_text">
                        <td class="caption_1">地机</td>
                        <td>
                            <span class="redBalls">02</span><span class="blueBalls">03</span><span class="greenBalls">05</span>
                            <span class="greenBalls">06</span><span class="redBalls">08</span><span class="redBalls">12</span>
                            <span class="redBalls">13</span><span class="blueBalls">15</span><span class="greenBalls">16</span>
                            <span class="redBalls">18</span><span class="greenBalls">22</span><span class="redBalls">23</span>
                            <span class="blueBalls">25</span><span class="blueBalls">26</span><span class="greenBalls">28</span>
                            <span class="greenBalls">32</span><span class="greenBalls">33</span><span class="redBalls">35</span>
                            <span class="blueBalls">36</span><span class="greenBalls">38</span><span class="blueBalls">42</span>
                            <span class="greenBalls">43</span><span class="redBalls">45</span><span class="redBalls">46</span>
                            <span class="blueBalls">48</span>
                        </td>
                        <td class="colorRed bolds odds">{{ratedata['特码:天玄地机:地机']}}</td>
                        <td><input type="text" class="moneyinp" v-model="moneydata['特码:天玄地机:地机']" @focus="quickbetFuns($event,'特码:天玄地机:地机')"></td>
                    </tr>
                    <tr class="t_td_text">
                        <td class="caption_1">上</td>
                        <td>
                            <span class="redBalls">01</span><span class="greenBalls">05</span><span class="greenBalls">06</span>
                            <span class="redBalls">08</span><span class="greenBalls">11</span><span class="blueBalls">15</span>
                            <span class="greenBalls">16</span><span class="redBalls">19</span><span class="greenBalls">22</span>
                            <span class="blueBalls">25</span><span class="blueBalls">26</span><span class="greenBalls">28</span>
                            <span class="blueBalls">31</span><span class="greenBalls">33</span><span class="blueBalls">36</span>
                            <span class="blueBalls">42</span>
                        </td>
                        <td class="colorRed bolds odds">{{ratedata['特码:上中下:上']}}</td>
                        <td><input type="text" class="moneyinp" v-model="moneydata['特码:上中下:上']" @focus="quickbetFuns($event,'特码:上中下:上')"></td>
                    </tr>
                    <tr class="t_td_text">
                        <td class="caption_1">中</td>
                        <td>
                            <span class="redBalls">02</span><span class="blueBalls">04</span><span class="blueBalls">09</span>
                            <span class="blueBalls">10</span><span class="redBalls">12</span><span class="redBalls">13</span>
                            <span class="greenBalls">17</span><span class="greenBalls">21</span><span class="redBalls">24</span>
                            <span class="greenBalls">27</span><span class="greenBalls">32</span><span class="redBalls">35</span>
                            <span class="greenBalls">38</span><span class="greenBalls">39</span><span class="redBalls">45</span>
                            <span class="blueBalls">47</span><span class="blueBalls">48</span>
                        </td>
                        <td class="colorRed bolds odds">{{ratedata['特码:上中下:中']}}</td>
                        <td><input type="text" class="moneyinp" v-model="moneydata['特码:上中下:中']" @focus="quickbetFuns($event,'特码:上中下:中')"></td>
                    </tr>
                    <tr class="t_td_text">
                        <td class="caption_1">下</td>
                        <td>
                            <span class="blueBalls">03</span><span class="redBalls">07</span><span class="blueBalls">14</span>
                            <span class="redBalls">18</span><span class="blueBalls">20</span><span class="redBalls">23</span>
                            <span class="redBalls">29</span><span class="redBalls">30</span><span class="redBalls">34</span>
                            <span class="blueBalls">37</span><span class="redBalls">40</span><span class="blueBalls">41</span>
                            <span class="greenBalls">43</span><span class="greenBalls">44</span><span class="redBalls">46</span>
                            <span class="greenBalls">49</span>
                        </td>
                        <td class="colorRed bolds odds">{{ratedata['特码:上中下:下']}}</td>
                        <td><input type="text" class="moneyinp" v-model="moneydata['特码:上中下:下']" @focus="quickbetFuns($event,'特码:上中下:下')"></td>
                    </tr>
                </table>
    </div>
</template>

<script>

    var timer = null;
    import axios from 'axios'
    import {lotterytype} from '../../../../assets/js/lotterytype.js'
    export default {
        name: "LhcSxsm",
        props: {  //普通类型：String、Number、Boolean、Null    引用类型： Array、Object
            betmoney: {   //   下注金额
                type: String,
                required: true
            },
            resetinp: {   //   是否重填已下注金额  0为未下注  其他为已下注
                type: Number,
                required: true
            },
            openBet: {  //开奖  可下注
                type: Boolean,
                required: true
            },
            ninetime: {  //90s
                type: Number,
                required: true
            },
        },
        data(){
            return{
                ratedata: {},  //实时赔率
                params: {},  //菜单
                moneydata: {},
                betdataArr: [],  //下注 提交data
                nowitem: '',  //当前操作的下注item号
                arr: [],  //
            }
        },
        methods: {
            init(){
                var _this = this;
                // console.log(this.$route.query);

                this.params = lotterytype.apiParams(this.$route.query.id,this.$route.query.levelid);

                if(window.localStorage.Authorization){
                    
                    _this.$httpGet('/api/game/listRate/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                        
                        if(response.status == 200){
                            _this.ratedata = response.data.rates;
                            // console.log(_this.ratedata);

                            if(response.data.need){
                                _this.$httpPost('/api/setting/rateItem/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                                
                                    if(response.status == 200){
                                        
                                    }

                                });
                            }
                        }

                    });

                }

            },
            inits(){
                var _this = this;
                // console.log(this.$route.query);

                this.params = lotterytype.apiParams(this.$route.query.id,this.$route.query.levelid);

                if(window.localStorage.Authorization){
                    
                    if (timer) {
                        clearInterval(timer);
                        timer = null;
                    }

                    _this.$httpGet('/api/game/listRate/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                        
                        if(response.status == 200){
                            _this.ratedata = response.data.rates;
                            // console.log(_this.ratedata);

                            if(response.data.need){
                                _this.$httpPost('/api/setting/rateItem/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                                
                                    if(response.status == 200){
                                        
                                    }

                                });
                            }

                            timer = setInterval(() => {
                                _this.inits();
                            }, 10 * 1000)
                        }

                    });

                }

            },
            //快捷下注
            quickbetFuns(ev,item,odds){
                var _this = this;
                if(_this.betmoney){

                    // Vue.set方法用来新增对象的属性。
                    _this.$set(_this.moneydata, item, _this.betmoney);
                    
                }
                _this.nowitem = item;
            },
            
        },
        mounted(){
            this.inits();
        },
        beforeDestroy(){
            clearInterval(timer);
        },
        watch :{
            resetinp: function(now,old){

                if(now != 0){   //重填下注金额

                    this.moneydata = {};  //清空所有下注金额
                    this.betdataArr = [];
                    this.arr = [];
                    
                }
            },
            moneydata: {
                
                //注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
　　　　　　　　　handler(newValue, oldValue) {

                    var _this = this;
        // 　　　　　　console.log(newValue[this.nowitem],newValue,this.nowitem)

                    if(newValue[_this.nowitem] != '' && newValue[_this.nowitem] != '0' && newValue[_this.nowitem] != undefined){

                        if (_this.arr.indexOf(_this.nowitem) == -1) {
                            _this.arr.push(_this.nowitem);
                            _this.betdataArr.push({'item': _this.nowitem,'value': newValue[_this.nowitem],'balls': []});
                        } else {
                            for(var i=0;i<_this.betdataArr.length;i++){

                                if(_this.nowitem == _this.betdataArr[i].item){
                                    _this.betdataArr[i].value= newValue[_this.nowitem];
                                }
                            }
                        }


                    }else{  //当前改变值为空

                        for(var i=0;i<_this.betdataArr.length;i++){

                            if(_this.betdataArr[i].item == _this.nowitem){
                                _this.betdataArr.splice(i,1);
                            }

                        }

                    }

                    var betdataObj = {};
                    betdataObj.game = _this.params.nowlottery;
                    betdataObj.items = _this.betdataArr;
                    
                    if(_this.betdataArr.length == 0){
                        _this.$emit('betdataObj',{});
                    }else{
                        _this.$emit('betdataObj',betdataObj);
                    }
                    // console.log('------watch',betdataObj);

        　　　　 },
        　　　　 deep: true
            },
            openBet: function(now,old){
                console.log(now,old);
                this.init();
            },
            ninetime: function(now,old){
                console.log('------------90s  刷新');
                //90s  刷新数据
                this.init();
            },
        },
    }
</script>
